<script setup>
import {IconEye} from "@arco-design/web-vue/es/icon";
import {onMounted, ref} from 'vue'
import apiAll from "@/api/apiAll.js";
import Detail from "./detail.vue";
import {history_column} from "@/utils/tableColumn.js";

const columns = history_column;
const loading = ref(true)
const data = ref([])
const param = ref({
  page: 1,
  size: 10,
  total: 0
})
const detailRef = ref()

const loadData = () => {
  loading.value = true
  apiAll.configApi.history(param.value).then(res => {
    data.value = res.data
    param.value.total = res.total
  }).finally(() => {
    setTimeout(() => {
      loading.value = false
    }, 300)
  })
}

const showDetail = (id) => {
  detailRef.value.show(id)
}

onMounted(() => {
  loadData()
})
const changePage = (number) => {
  param.value.page = number
  loadData()
}
const changePageSize = (size) => {
  param.value.size = size
  loadData()
}
</script>

<template>
  <div class="flex-column">
    <div class="flex-row" style="margin-bottom: 10px">
      <a-button @click="loadData" type="primary">刷新表格</a-button>
    </div>
    <a-table :columns="columns" :data="data" :loading="loading" :pagination="false">
      <template #action="{ rowIndex, record }">
        <div class="flex-row">
          <a-button type="primary" size="mini" @click="showDetail(record.id)">
            <template #icon>
              <icon-eye/>
            </template>
            <template #default>详情</template>
          </a-button>
        </div>
      </template>
    </a-table>
    <a-pagination @change="changePage" @page-size-change="changePageSize" :total="param.total" show-total show-jumper
                  style="margin-top: 15px" show-page-size/>
    <Detail ref="detailRef" @success="loadData()"/>
  </div>
</template>

<style scoped>

</style>